import { useState, useEffect } from 'react';
import Taro, { useReachBottom } from '@tarojs/taro';
import { View } from "@tarojs/components";
import { AtTabs, AtTabsPane, AtActivityIndicator } from "taro-ui";
import Header from "@/components/header";
import Card from '@/components/Card';
import { showArticleData, getAllTrain } from "@/api/index";
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/activity-indicator.scss";
import 'taro-ui/dist/style/components/loading.scss';
import css from "./index.module.less";
import "./index.less";

export default function Index() {
  const [userInfo, setUserInfo] = useState({});
  const [trainData, setTrainData] = useState([]);
  const [pageData, setPageData] = useState({ page: 1, size: 7 });
  const [current, setCurrent] = useState(0);
  //加载动画的开关
  const [isOpened, setIsOpened] = useState(false);
  const tabList = [
    { title: "党员先锋" },
    { title: "基层风采" },
    { title: "党校培训" },
    { title: "战斗堡垒" }
  ];

  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (a) {
        console.log(a.data);
        setUserInfo(a.data);
        setIsOpened(true);
        showArticleData(1, 1, 7).then((res) => {
          if (res.code === 200) {
            setTrainData(res.data);
          }
          else {
            Taro.showToast({
              title: '加载失败',
              duration: 1500,
              icon: 'error'
            });
          }
          setIsOpened(false);
        });
      }
    });
  }, []);

  useReachBottom(() => {
    if (current === 2) {
      getAllTrain(pageData.page + 1, pageData.size).then(res => {
        setTrainData([...trainData, ...res.data]);
      });
    }
    else {
      showArticleData(current + 1, pageData.page + 1, pageData.size).then((res) => {
        setTrainData([...trainData, ...res.data]);
      });
    }
    setPageData({ page: pageData.page + 1, size: pageData.size });
  });

  const changeCurrent = (value) => {
    setCurrent(value);
  };

  useEffect(() => {
    setIsOpened(true);
    if (current === 2) {
      getAllTrain(1, 7).then(res => {
        if (res.code === 200) {
          setTrainData(res.data);
        }
        else {
          Taro.showToast({
            title: '加载失败',
            duration: 1500,
            icon: 'error'
          });
        }
        setIsOpened(false);
      });
    }
    else {
      showArticleData(current + 1, 1, 7).then(res => {
        if (res.code === 200) {
          setTrainData(res.data);
        }
        else {
          Taro.showToast({
            title: '加载失败',
            duration: 1500,
            icon: 'error'
          });
        }
        setIsOpened(false);
      });
    }
    setPageData({ page: 1, size: 7 });
  }, [current]);

  // 跳转党员先锋详情界面
  const toPartyPioneerDetails = (msgId) => {
    if (userInfo.partyId === undefined) Taro.switchTab({ url: '../applaction/index' });
    else {
      Taro.navigateTo({ url: `party_pioneer_details/index?id=${userInfo.partyId}&msgId=${msgId}&type=1` });
    }
  };
  // 跳转基层风采详情界面
  const toBasicStyleDetails = (msgId) => {
    if (userInfo.partyId === undefined) Taro.switchTab({ url: '../applaction/index' });
    else {
      Taro.navigateTo({ url: `basic_style_details/index?id=${userInfo.partyId}&msgId=${msgId}&type=2` });
    }
  };
  // 跳转党校培训详情界面
  const toSchoolTrainingDetails = (msgId) => {
    if (userInfo.partyId === undefined) Taro.switchTab({ url: '../applaction/index' });
    else {
      Taro.navigateTo({ url: `school_training_details/index?id=${userInfo.partyId}&msgId=${msgId}&type=3` });
    }
  };
  // 跳转战斗堡垒详情界面
  const toFightFortDetails = (msgId) => {
    if (userInfo.partyId === undefined) Taro.switchTab({ url: '../applaction/index' });
    else {
      Taro.navigateTo({ url: `fight_fort_details/index?id=${userInfo.partyId}&msgId=${msgId}&type=4` });
    }
  };
  return (
    <View className={css.app}>
      <AtActivityIndicator isOpened={isOpened} content='加载中...' size={80} mode='center' color='rgb(179,179,179)' />
      <Header message='党建小程序' left='140px' />
      <View className={css.content}>
        <AtTabs
          current={current}
          tabList={tabList}
          onClick={changeCurrent}
          className={css.tabs}
        >
          <AtTabsPane current={current} index={0}>
            <View>
              {
                trainData.map((item) => {
                  return (
                    <View key={item.id} onClick={() => toPartyPioneerDetails(item.id)}>
                      <Card info={{ text: item.title, date: item.checkTime, school: item.organizationName, image: item.imgUrl, isDingZhi: !item.topSort ? true : false }} />
                    </View>);
                })
              }
            </View>
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            <View>
              {
                trainData.map((item) => {
                  return (
                    <View key={item.id} onClick={() => toBasicStyleDetails(item.id)}>
                      <Card info={{ text: item.title, date: item.checkTime, school: item.organizationName, image: item.imgUrl, isDingZhi: !item.topSort ? true : false }} />
                    </View>);
                })
              }
            </View>
          </AtTabsPane>
          <AtTabsPane current={current} index={2}>
            <View>
              {
                trainData.map((item) => {
                  return (
                    <View key={item.id} onClick={() => toSchoolTrainingDetails(item.id)}>
                      <Card info={{ text: item.title, date: item.publishTime, school: item.organizationName, image: item.picUrl, isDingZhi: false }} />
                    </View>);
                })
              }
            </View>
          </AtTabsPane>
          <AtTabsPane current={current} index={3}>
            <View>
              {
                trainData.map((item) => {
                  return (
                    <View key={item.id} onClick={() => toFightFortDetails(item.id)}>
                      <Card info={{ text: item.title, date: item.checkTime, school: item.organizationName, image: item.imgUrl, isDingZhi: !item.topSort ? true : false }} />
                    </View>);
                })
              }
            </View>
          </AtTabsPane>
        </AtTabs>
      </View>
    </View>
  );
}
